<template>
	<view>
		<view class="blank30"></view>
		<view class="flex" style="justify-content: center;">
			<view class="avatar-wrapper" @click="chooseAvatar">
				<u-avatar :src="getImgSrc(form.avatar)" :size="upx2px(124)"></u-avatar>
				<image class="icon" src="/static/images/edit-mini.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="blank30"></view>
		<view class="wrapper">
			<u--form :labelStyle="formLabelStyle" labelPosition="top" :model="form" :rules="rules" ref="uForm"
				labelWidth="300">
				<u-form-item label="Full Name" prop="fullName">
					<u--input :customStyle="inputCustomStyle" placeholder="Enter" v-model="form.fullName" border="none"
						fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Gender" prop="sex">
					<u-radio-group v-model="form.sex" placement="row" activeColor="#FFB237">
						<view class="flex justify-between" style="position: relative;width: 100%;">
							<u-radio :labelSize="12" :customStyle="ratioCustomStyle" label="Male" :name="0">
							</u-radio>
							<u-radio :labelSize="12" :customStyle="ratioCustomStyle" label="Female" :name="1">
							</u-radio>
						</view>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="Date of Birth" prop="birth">
					<view style="position: relative;width: 100%;">
						<u--input :customStyle="inputCustomStyle" placeholder="please choose" :value="form.birth"
							border="none" fontSize="12px" disabled @click.native="birthPickerShow = true">
							<view slot="suffix">
								<image class="date-icon" src="/static/images/rl.jpg" mode="aspectFit"></image>
							</view>
						</u--input>
					</view>
				</u-form-item>
				<u-form-item label="Email address" prop="email">
					<u--input :customStyle="inputCustomStyle" placeholder="Enter" v-model="form.email" border="none"
						fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Phone number" prop="phone">
					<u--input :customStyle="inputCustomStyle" placeholder="Enter" v-model="form.phone" border="none"
						fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="WeChat ID/Account" prop="weChat">
					<u--input :customStyle="inputCustomStyle" placeholder="Enter" v-model="form.weChat" border="none"
						fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Nationality" prop="countriesSid">
					<view style="position: relative;width: 100%;">
						<u--input fontSize="12px" :customStyle="inputCustomStyle" placeholder="please choose"
							border="none" disabled @click.native="toCountry" :value="countriesSidName">
							<view slot="suffix">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u--input>
					</view>
				</u-form-item>
				<u-form-item label="Educational Background" prop="degreeSid">
					<view style="position: relative;width: 100%;">
						<u--input fontSize="12px" :value="degreeSidName"
							:customStyle="inputCustomStyle" placeholder="please choose" border="none" disabled
							@click.native="openPicker('degreeSid')">
							<view slot="suffix">
								<u-icon name="arrow-down"></u-icon>
							</view>
						</u--input>
					</view>
				</u-form-item>
				<u-form-item label="Work experience" prop="workSid">
					<view style="position: relative;width: 100%;">
						<u--input fontSize="12px" :value="workSidName"
							:customStyle="inputCustomStyle" placeholder="please choose" border="none" disabled
							@click.native="openPicker('workSid')">
							<view slot="suffix">
								<u-icon name="arrow-down"></u-icon>
							</view>
						</u--input>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="blank20"></view>	
		<fixed-bottom-btn @submit="submit"></fixed-bottom-btn>
		
		<u-datetime-picker :closeOnClickOverlay="true" :maxDate="datetimePickerMaxDate" :minDate="datetimePickerMinDate" :show="birthPickerShow" mode="date" @confirm="onConfirmBirthPicker"
			@close="onCloseBirthPicker" @cancel="onCancelBirthPicker" cancelText="Cancel"
			confirmText="Confirm"></u-datetime-picker>

		<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" @confirm="onConfirmPicker" @close="onClosePicker"
			@cancel="onCancelPicker" keyName="label" cancelText="Cancel" confirmText="Confirm"></u-picker>

	</view>
</template>

<script>
	import fixedBottomBtn from '@/components/fixed-bottom-btn.vue';
	import {
		resume_sid_me,
		candidate_save,
		candidate_sid_edit,
		dicts_by_key,
		candidate_sid_candidate_detail
	} from '@/common/api.js';
	export default {
		components: {
			fixedBottomBtn
		},
		data() {
			return {
				form: {
					// "ascriptionUserId": 0,
					"avatar": "",
					"birth":"",
					"countriesSid": "",
					"createType": 2,
					"degreeSid": "",
					"email": "",
					"fullName": "",
					"phone": "",
					"recommendPrice": 0,
					"recruiter": 0,
					"recruiterPrice": 0,
					"sex": '',
					"status": 0,
					"weChat": "",
					"workSid": ""
				},
				rules: {
					fullName: [{
						required: true,
						message: 'Full Name required',
						trigger: ['blur', 'change']
					}],
					sex: [{
						required: true,
						message: 'Gender required',
						trigger: ['blur', 'change']
					}],
					birth: [{
						required: true,
						message: 'Date of Birth required',
						trigger: ['blur', 'change']
					}],
					email: [{
						required: true,
						message: 'Email address required',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: 'Phone number required',
						trigger: ['blur', 'change']
					}],
					weChat: [{
						required: true,
						message: 'WeChat ID/Account required',
						trigger: ['blur', 'change']
					}],
					countriesSid: [{
						required: true,
						message: 'Nationality required',
						trigger: ['blur', 'change']
					}],
					degreeSid:[{
						required: true,
						message: 'Educational Background required',
						trigger: ['blur', 'change']
					}],
					workSid:[{
						required: true,
						message: 'Work experience required',
						trigger: ['blur', 'change']
					}]
				},
				ratioCustomStyle: {
					width: "48%",
					padding: '24upx 24upx',
					borderRadius: '16upx',
					background: '#ffffff'
				},
				birthPickerShow: false,
				pickerShow: false,
				pickerColumns: [],
				pickerKey:'',
				countriesSidName:'',
				degreeSidName:'',
				workSidName:'',
				degreeSidPicker:[],
				workSidPicker:[],
			}
		},
		computed:{
			
		},
		methods: {
			toCountry() {
				this.nav('/pages/country/country?id='+this.form.countriesSid);
			},
			onCloseBirthPicker(e) {
				this.birthPickerShow = false;
			},
			onCancelBirthPicker() {
				this.birthPickerShow = false;
			},
			onConfirmBirthPicker(e) {
				this.birthPickerShow = false;
				let d = this.formatDatetime(e.value);
				this.form.birth = d;
			},
			openPicker(key){
				let pickerColumns;
				if(key == 'workSid'){
					pickerColumns = this.workSidPicker;
				}
				if(key == 'degreeSid'){
					pickerColumns = this.degreeSidPicker;
				}
				this.pickerKey = key;
				this.pickerColumns = [pickerColumns];
				this.pickerShow = true;
			},
			onClosePicker(e) {
				this.pickerShow = false;
			},
			onCancelPicker() {
				this.pickerShow = false;
			},
			onConfirmPicker(e) {
				this.pickerShow = false;
				let pickerKey = this.pickerKey;
				this.form[pickerKey] = e.value[0].value;
				this[`${pickerKey}Name`] = e.value[0].label;
			},
			async chooseAvatar() {
				let url = await this.uniChooseImage(1);
				const result = await this.uploadFilePromise(url);
				this.form.avatar = result.url;
				uni.$u.toast('success');
			},
			submit() {
				if(!this.form.avatar){
					uni.$u.toast('upload avatar');
					return;
				}
				this.$refs.uForm.validate().then(res => {
					let data = JSON.parse(JSON.stringify(this.form));
					data.ascriptionUserId = this.ascriptionUserId;
					uni.showLoading({
						title: 'loading'
					});
					if(!this.sid){
						candidate_save(data).then(async (res) => {
							// console.log(res);
							let sid = res.data;
							this.$store.commit('set_sid', sid);
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
							// 51-7dd506e7978e4362885f4f5e1cf27566
						})
					}else{
						candidate_sid_edit(this.sid,data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					}
					
				}).catch(errors => {
					try {
						uni.$u.toast(errors[0].message)
					} catch (e) {
						uni.$u.toast('please enter')
					}
				})
			},
			getData() {
				if (!this.sid) {
					return false;
				}
				uni.showLoading({
					title: 'loading'
				});
				resume_sid_me(this.sid).then(async (res) => {
					let {
						candidate,
						expectations,
						project,
						school,
						tag,
						work
					} = res.data;
					this.form.avatar = candidate.avatar;
					this.form.fullName = candidate.fullName;
					this.form.birth = candidate.birth;
					this.form.email = candidate.email;
					this.form.phone = candidate.phone;
					this.form.sex = candidate.sex;
					this.form.status = candidate.status;
					this.form.weChat = candidate.weChat;
					// "recommendPrice": 0,
					// "recruiter": 0,
					// "recruiterPrice": 0,
					try{
						this.form.countriesSid = candidate.countries.sid;
						this.countriesSidName = candidate.countries.countriesName;
						this.form.degreeSid = candidate.degree.sid;
						this.degreeSidName = candidate.degree.memberName;
						this.form.workSid = candidate.work.sid;
						this.workSidName = candidate.work.memberName;
					}catch(e){
						//TODO handle the exception
					}
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			init(){
				dicts_by_key('Experience').then(async (res) => {
					let { data } = res;
					let workSidPicker = data.map(v=>{
						return {
							label:v.memberName,
							value:v.sid
						}
					});
					this.workSidPicker = workSidPicker;
				});
				dicts_by_key('degree').then(async (res) => {
					let { data } = res;
					let degreeSidPicker = data.map(v=>{
						return {
							label:v.memberName,
							value:v.sid
						}
					});
					this.degreeSidPicker = degreeSidPicker;
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			uni.$off('refresh_information');
			uni.$once('refresh_information', (v) => {
				this.getData();
			});
			uni.$off('select_country');
			uni.$once('select_country', (data) => {
				this.form.countriesSid = data.sid;
				this.countriesSidName = data.countriesName;
			});
		},
		onLoad(d) {
			this.init();
			this.getData();
		},
		onPullDownRefresh() {
			// this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.avatar-wrapper {
		position: relative;

		.icon {
			position: absolute;
			width: 64upx;
			height: 64upx;
			bottom: -20upx;
			right: -8upx;
		}
	}

	.date-icon {
		width: 40upx;
		height: 40upx;
	}
</style>